<template>
  <div class="common-layout">
    <el-container>
      <el-aside :width="asideWidth">
        <Aside :watchIsFlag="watchIsFlag" />
        显示区
      </el-aside>
      <el-container >
        <el-header>
          <MyHeader />
        </el-header>
        <el-main>
          <Container />
        </el-main>
    <el-footer ><MyFoot /></el-footer>
      </el-container>
    </el-container>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from "vue";
import Aside from "comp/MyAside/index.vue";
import Container from "comp/MyContainer/index.vue";
import MyHeader from "comp/MyHeader/index.vue";
import MyFoot from "comp/MyFoot/index.vue";

export default defineComponent({
  name: "Main",
  components: {
    Aside,
    Container,
    MyHeader,
    MyFoot
  },
  setup() {
    // 展开300 缩回64
    let asideWidth = ref<string>();

    // 检测变化状态
    const watchIsFlag = (flag: boolean) => {
      if (flag) {
        asideWidth.value = "64px";
      } else {
        asideWidth.value = "300px";
      }
    };

    return {
      asideWidth,
      watchIsFlag,
    };
  },
});
</script>


<style scoped lang="less">
.el-container{
  width: 1910px;
}
.common-layout {
  height: 100%;

  .el-container {
    height: 100%;
    .el-aside {

    }
    .el-container {
      .el-header {
       padding: 0;
        // background-color: antiquewhite;
      }
      .el-main {
       padding: 0;

        // background-color: rgb(167, 37, 172);
      }
    }
  }

}
</style>